<template>
	<view>
		<!-- 顶部导航栏 -->
		<myheader></myheader>
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="btn">
				<view class="buy" @tap="buy">
					<div>
						<span v-if="price==0.00">立即领取</span>
						<span v-if="price>0">立即预存</span>
						<p v-if="price>0">¥{{price}}</p>
					</div>
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="description">
			<image :src="copoun_img"></image>
			<view class="desc_box_title">使用说明</view>
			<view class="desc_box">
				<view class="desc_box_title">{{name}}</view>
				<view class="content">
					<parse :content="descriptionStr"></parse>
					<!-- <rich-text :nodes="descriptionStr"></rich-text> -->
				</view>
			</view>
			<!-- testurl:{{this.testurl}} -->
		</view>
		<view class="place"></view>
		<!-- 底部footer -->
		<myfooter  ></myfooter>
	</view>
</template>

<script>
	const graceText = require('../../utils/graceText.js')
	import parse from "@/components/uParse-master/src/wxParse.vue";
	import wx from 'weixin-js-sdk';
	export default {
		components:{
			parse
		},
		data() {
			return {
				//
				name: '',
				price: '',
				//商品图片
				copoun_img: '',
				//商品描述html
				descriptionStr: '',
				cid: '',
				testurl: '',
				timer:'',
				token:''
			};
		},
		onLoad(option) {

			//option为object类型，会序列化上个页面传递的参数
			//console.log(option.cid); //打印出上个页面传递的参数。
			this.getdata(option.cid)
			this.cid = option.cid
		    let token=uni.getStorageSync("token_h5")
			let mini_openid = uni.getStorageSync("mini_openid");
			
			if(mini_openid&&mini_openid!=""){
				if(option.ispaysuccess=="1"){
					uni.showToast({
						title: "支付成功",
						icon: "none",
						duration:2000
					});
				}
				else if(option.ispaysuccess=="0"){
					uni.showToast({
						title: "支付失败",
						icon: "none",
						duration:2000
					});
				}
			}
			if(option.ispay=="1"){
				this.timer= setInterval(() => {
						uni.showLoading({
							title: '支付中...'
						})
						this.checkPay()
					},2000)
					setTimeout(()=> {
						uni.hideLoading();
						uni.showToast({
							title: "支付失败",
							icon: "none",
							duration:2000
						});
						clearInterval(this.timer);
					},120000)
				
			}
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			// uni.showToast({
			// 	title: '触发上拉加载'
			// });
		},
		mounted() {

		},
		methods: {
			//立即购买
			buy() {
				uni.showLoading({
					title: '购买中...'
				})
				let iswechat = false;
				let ua = window.navigator.userAgent.toLowerCase();
				//alert(ua)
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					iswechat = true;
				} else {
					iswechat = false;
				}
				let token=uni.getStorageSync("token_h5")
				//alert(this.token)
				if (this.price == 0.00) {
					//价格等于0的时候直接生成订单
					uni.request({
						url: "https://bg.jswbgz.com/post/copoun_order:submit_0", //
						data: {
							id: this.cid,
							token:token
							//url:'https://home.jswbgz.com/pages/copoun/copoun?cid='+this.cid+'&ispay=1'
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						method: 'post',
						success: (res) => {
							uni.hideLoading()
							//console.log(res.data.data)
							this.testurl = res;
							if(res.data.success){
								
								if (res.data.data.code == 1) {
									uni.showToast({
										title: "领取成功",
										icon: "none"
									});
								
								}
								else {
									uni.showToast({
										title: res.data.data.msg,
										icon: "none"
									});
								}
							}
							
							else if(res.data.msg=="登录已失效，请重新登录"){
								this.$logout();
							} 
							else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
					
						},
						fail: (res) => {
							uni.showToast({
								title: "生成订单失败",
								icon: "none"
							});
							//console.log(res)
						}
					});
					
				} else {
					if (iswechat) {
						//微信内打开使用jsapi支付
						let openid = uni.getStorageSync("OPENID");
						let mini_openid = uni.getStorageSync("mini_openid");
						wx.miniProgram.getEnv((res) => {
						 if (res.miniprogram) {
						    if(mini_openid&&mini_openid!=""){
						    	//alert("小程序支付")
						    	uni.request({
						    		url: "https://bg.jswbgz.com/post/wx_jsapi:xcx_do_pay", //
						    		data: {
						    			id: this.cid,
						    			open_id:mini_openid,
						    			token:token
						    		},
						    		header: {
						    			'Content-Type': 'application/x-www-form-urlencoded'
						    		},
						    		dataType: 'json',
						    		method: 'post',
						    		success: (reslut) => {
						    			uni.hideLoading()
						    			//alert(reslut)
						    			var res2=JSON.stringify(reslut)
						    	        console.log(reslut.data.data)
						    			//alert(res2)
						    			if(reslut.data.success){
						    				if(reslut.data.data.code==1){
						    					const _data=JSON.parse(reslut.data.data.msg)
						    					//uni.setStorageSync("out_trade_no",res.data.data.out_trade_no);
						    					//alert("小程序支付"+JSON.stringify(_data))
						    					let callback_url="https://home.jswbgz.com/pages/copoun/copoun?cid="+this.cid+"";
						    					let url= `/pages/web/payCallBack?amount=${encodeURIComponent(JSON.stringify(_data))}&callback_url=${encodeURIComponent(callback_url)}`
						    					//alert(url)
						    					wx.miniProgram.navigateTo({
						    					    url: url,
						    						success:function() {a
						    							//alert("跳转成功")
						    						}
						    					})
						    					
						    				}
						    				else{
						    					uni.showToast({
						    						title: reslut.data.data.msg,
						    						icon: "none"
						    					});
						    					
						    				}
						    			}
						    			else if(reslut.data.msg=="登录已失效，请重新登录"){
						    				this.$logout();
						    			}
						    			else{
						    				uni.showToast({
						    					title: reslut.data.msg,
						    					icon: "none"
						    				});
						    			}
						    	
						    		},
						    		fail: (res) => {
						    	
						    			uni.showToast({
						    				title: "生成订单失败",
						    				icon: "none"
						    			});
						    			console.log(res)
						    		}
						    	});
						    
						    }
						 } else {
						    console.log('不在小程序')
						    uni.request({
						    	url: "https://bg.jswbgz.com/post/wx_jsapi:do_pay", //
						    	data: {
						    		id: this.cid,
						    		open_id:openid,
						    		token:token
						    	},
						    	header: {
						    		'Content-Type': 'application/x-www-form-urlencoded'
						    	},
						    	dataType: 'json',
						    	method: 'post',
						    	success: (reslut) => {
						    		uni.hideLoading()
						    		//alert(reslut)
						    		var res2=JSON.stringify(reslut)
						            console.log(reslut.data.data)
						    		//alert(res2)
						    		if(reslut.data.success){
						    			if(reslut.data.data.code==1){
						    				const _data=JSON.parse(reslut.data.data.msg)
						    				WeixinJSBridge.invoke(
						    						'getBrandWCPayRequest',_data,
						    						(res) => {
						    							if (res.err_msg == "get_brand_wcpay_request:ok") {
						    								uni.showToast({
						    									title: "支付成功",
						    									icon: "none"
						    								});
						    							}
						    							else{
						    								uni.showToast({
						    									title: "支付失败",
						    									icon: "none"
						    								});
						    							}
						    						}
						    					);
						    			}
						    			else{
						    				uni.showToast({
						    					title: reslut.data.data.msg,
						    					icon: "none"
						    				});
						    			}
						    		}
						    		else if(reslut.data.msg=="登录已失效，请重新登录"){
						    			this.$logout();
						    		}
						    		else{
						    			uni.showToast({
						    				title: reslut.data.msg,
						    				icon: "none"
						    			});
						    		}
						    
						    	},
						    	fail: (res) => {
						    
						    		uni.showToast({
						    			title: "生成订单失败",
						    			icon: "none"
						    		});
						    		console.log(res)
						    	}
						    });
						    
						 }
						 })
						//alert(openid)
					
					} 
					else {
						//非微信打开的时候使用H5支付
						uni.request({
							url: "https://bg.jswbgz.com/post/weixin:do_pay", //
							data: {
								id: this.cid,
								token:token
								//url:'https://home.jswbgz.com/pages/copoun/copoun?cid='+this.cid+'&ispay=1'
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							dataType: 'json',
							method: 'post',
							success: (res) => {
								uni.hideLoading()
								//console.log(res.data.data)
								this.testurl = res;
								if(res.data.success)
								{
									if (res.data.data.code == 1) {
									    uni.setStorageSync("out_trade_no",res.data.data.out_trade_no);
										window.location.href = res.data.data.msg
									   
										//location.href =res.data.data.msg
									}
									else {
										uni.showToast({
											title: res.data.data.msg,
											icon: "none"
										});
									}
								}
								else if(res.data.msg=="登录已失效，请重新登录"){
									console.log(res.data.msg)
									this.$logout();
								} 
								else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
								

							},
							fail: (res) => {
								uni.showToast({
									title: "生成订单失败",
									icon: "none"
								});
								console.log(res)
							}
						});

					}
				}
			},
			getdata(cid) {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: "https://bg.jswbgz.com/post/item:select", //
					data: {
						id: cid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					method: 'post',
					success: (res) => {
						uni.hideLoading()
						//console.log(res.data.data)
						if (res.data.data != false) {
							//console.log(res)
							//let pluginDoc = new HTMLParser(graceText.formatRichText(res.data.data.intro));
							this.descriptionStr =graceText.formatRichText(res.data.data.intro) ;
							this.copoun_img = res.data.data.img_url;
							this.price = res.data.data.price;
							this.name = res.data.data.name;
						} else {
							this.descriptionStr = "没有数据";
						}

					},
					fail: (res) => {
						this.descriptionStr = "没有数据";
						uni.showToast({
							title: "数据加载失败",
							icon: "none"
						});
						console.log(res)
					}
				});
			},
			checkPay() {
				let out_trade_no = uni.getStorageSync("out_trade_no");
				//检测是否支付成功
				uni.request({
					url: "https://bg.jswbgz.com/post/user:is_success_order", 
					data: {
						out_trade_no: out_trade_no
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					method: 'post',
					success: (res) => {
						
						//console.log(res.data.data)
						if (res.data.data ==1) {
							uni.hideLoading();
							clearInterval(this.timer);
						     uni.showToast({
						     	title: "支付成功",
						     	icon: "none"
						     });
						} 
						else if(res.data.data ==0) {
							uni.hideLoading();
							clearInterval(this.timer);
						     uni.showToast({
						     	title: "支付失败",
						     	icon: "none"
						     });
						}
			
					},
					fail: (res) => {
						console.log(res)
					}
				});
			}
			

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.icon {
		font-size: 26upx;
	}

	.description {
		padding: 60upx 40upx;

		image {
			width: 100%;
		}

		.desc_box_title {
			font-size: 14px;
			font-weight: 300;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding: 40upx 0;
		}

		.desc_box {
			background: #fff;
			padding: 30upx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
			color: #3D3D3D;
             margin-bottom: 60px;
			.desc_box_title {
				padding: 5px 0;
				font-size: 18px;
				font-weight: 600;
			}
		}

		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}

	.footer {
		position: fixed;
		bottom: 160upx;
		width: 92%;
		padding: 0 4%;
		height: 99upx;
		// border-top: solid 1upx #eee;
		// background-color: #fff;
		background-color: transparent;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;
			height: 80upx;
			margin-left: -4%;

			.box {
				width: 80upx;
				height: 80upx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.icon {
					font-size: 40upx;
					color: #828282;
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 22upx;
					color: #666;
				}
			}
		}

		.btn {
			width: 235px;
			height: 90px;
			border-radius: 40upx;
			overflow: hidden;
			display: flex;
			margin: 0 auto;
            margin-bottom: 15px;
			.joinCart,
			.buy {
				width: 235px;
				height: 90px;
				
				color: #fff;
				display: flex;
				align-items: center;
				font-size: 22px;
              
				div{
					    margin: 0 auto;
				}
				p {
					text-align: center;
					font-size: 22px;
				}

			}

			.joinCart {
				background-color: #f0b46c;
			}

			.buy {
				//background-color: #da4e52;
				background: url('/static/img/copoun/paybtn.png') no-repeat center;
				width: 235px;
				text-align: center;
				color: #fff;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 92%;
			padding: 0 4%;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.content {
				width: 100%;
				padding: 20upx 0;
			}

			.btn {
				width: 100%;
				height: 100upx;

				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		&.service {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}

			.sp {
				display: flex;

				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;

					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}

			.length {
				margin-top: 30upx;
				border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;

				.text {
					font-size: 30upx;
				}

				.number {
					display: flex;
					justify-content: center;
					align-items: center;

					.input {
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}

					.sub,
					.add {
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;

						.icon {
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}
				}
			}

		}
	}
</style>
